<template>
  <outMain>
    <div class="tableCont">
      <div class="page-title">
        <span class="title-text">账号列表</span>
        <div class="title-decoration"></div>
      </div>
      <div class="tableHead">
        <div class="formInput">
          <input
            v-model="queryData.account"
            placeholder="请输入需要查询的账号名称"
          />
        </div>
        <el-button @click="searchFn" class="public-button">
          <span class="iconfont icon-sousuo"></span>
          <span>查询</span>
        </el-button>
        <el-button @click="addFn" class="public-button">
          <span class="iconfont icon-xinzeng"></span>
          <span>新增账号</span>
        </el-button>
      </div>
      <el-table class="tableMain" :data="tableData" stripe>
        <el-table-column
          prop="account"
          show-overflow-tooltip
          label="账号名称"
        />
        <el-table-column
          prop="password"
          show-overflow-tooltip
          label="账号密码"
        />
        <el-table-column show-overflow-tooltip label="是否启用">
          <template #default="{ row }">
            <switchComponent
              :disabled="disStatus"
              @change="checkStatusFn(row)"
              v-model="row.status"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          show-overflow-tooltip
          label="创建时间"
        />
        <el-table-column prop="Name" width="140" label="操作">
          <template #default="{ row }">
            <div class="tableCtrl">
              <div class="action-cell">
                <div class="action-btn detail-btn" @click="handleDetail(row)">
                  <span class="iconfont icon-xiangqing-heliuxiangqing"></span>
                </div>
                <div class="action-btn edit-btn" @click="handleEdit(row)">
                  <span class="iconfont icon-bianji1"></span>
                </div>
                <div class="action-btn delete-btn" @click="handleDelete(row)">
                  <span class="iconfont icon-shanchu11"></span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageCont">
        <cool-pagination
          v-model:current-page="queryData.page"
          :page-size="queryData.per_page"
          :total="total"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 账号表单弹窗 -->
    <cool-dialog
      v-model="showMaskForm"
      :title="isEdit ? '编辑账号' : '新增账号'"
      @confirm="confirmDialog"
    >
      <div class="mask-form">
        <div class="form-group">
          <label class="form-label"
            >账号名称 <span class="required">*</span></label
          >
          <input
            type="text"
            v-model="formData.account"
            class="form-input"
            placeholder="请输入账号名称"
          />
        </div>

        <div class="form-group">
          <label class="form-label"
            >账号密码 <span class="required">*</span></label
          >
          <input
            type="password"
            v-model="formData.password"
            class="form-input"
            placeholder="请输入账号密码"
          />
        </div>
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">是否启用</div>
            <div class="setting-desc">账号状态：关闭将无法登录</div>
          </div>
          <switchComponent v-model="formData.status" />
        </div>
      </div>
    </cool-dialog>
  </outMain>
</template>
<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import CoolPagination from "@/components/CoolPagination.vue";
import CoolDialog from "@/components/CoolDialog.vue";
import switchComponent from "@/components/form/switch.vue";

import {
  account,
  accountAdd,
  accountEdit,
  accountDel,
  accountStatus,
} from "@/http/api";

export default {
  components: { outMain, CoolPagination, CoolDialog, switchComponent },
  name: "AccountList",
  data () {
    return {
      disStatus: false,
      showMaskForm: false,
      isEdit: false,
      formData: {
        id: null,
        account: "",
        password: "",
        status: true,
      },
      errors: {
        account: false,
        password: false,
      },
      tableData: [
        {
          account: "吴欢",
          password: "123456",
          status: true,
          create_time: "2021-01-01 12:00:00",
        },
      ],
      queryData: {
        page: 1,
        per_page: 10,
        account: "",
      },
      total: 0,
    };
  },
  methods: {
    // 删除账号
    handleDelete (row) {
      this.$coolConfirm
        .confirm({
          title: "删除提示",
          message: "确定要删除该账号吗？",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        })
        .then(async () => {
          const loading = ElLoading.service({
            lock: true,
            text: "Loading",
            background: "rgba(255, 255, 255, 0.7)",
          });
          try {
            const res = await accountDel({
              id: row.id,
            });
            if (res) {
              ElMessage.success("删除成功");
              this.getData();
            }
          } catch {}
          setTimeout(() => {
            loading.close();
          }, 100);
        })
        .catch(() => {});
    },

    validateForm () {
      if (!this.formData.account) {
        ElMessage.error("请输入账号名称");
        return false;
      } else if (!this.formData.password) {
        ElMessage.error("请输入账号密码");
        return false;
      }
      return true;
    },
    // 表单确认
    async confirmDialog () {
      // 验证表单
      if (!this.validateForm()) {
        return;
      }
      const queryData = { ...this.formData };
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });

      try {
        const res = this.isEdit
          ? await accountEdit(queryData)
          : await accountAdd(queryData);
        if (res) {
          ElMessage.success(this.isEdit ? "编辑成功" : "新增成功");
          this.showMaskForm = false;
          this.getData();
        }
      } catch {}
      setTimeout(() => {
        loading.close();
      }, 100);
    },
    handleDetail (row) {},
    // 编辑账号
    handleEdit (row) {
      this.isEdit = true;
      this.formData = {
        id: row.id,
        account: row.account,
        password: row.password,
        status: row.status,
      };
      this.showMaskForm = true;
    },

    // 新增账号
    addFn () {
      this.isEdit = false;
      this.formData = {
        id: null,
        account: "",
        password: "",
        status: true,
      };
      this.showMaskForm = true;
    },

    // 搜索
    searchFn () {
      this.queryData.page = 1;
      this.getData();
    },

    // 获取数据
    async getData () {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });

      try {
        const res = await account(this.queryData);
        if (res) {
          res.data = res.data.map((item) => {
            item.status = item.status ? true : false;
            return item;
          });
          this.tableData = res.data;
          this.total = res.total;
        }
      } catch {}
      setTimeout(() => {
        loading.close();
      }, 100);
    },

    // 状态切换
    async checkStatusFn (item) {
      this.disStatus = true;
      try {
        const res = await accountStatus({
          status: item.status,
          id: item.id,
        });
        if (res) {
          ElMessage({
            type: "success",
            message: "状态更新成功",
          });
          this.getData();
        } else {
          item.status = !item.status;
        }
      } catch {
        item.status = !item.status;
      } finally {
        setTimeout(() => {
          this.disStatus = false;
        }, 100);
      }
    },

    // 分页切换
    handlePageChange (page) {
      this.queryData.page = page;
      this.getData();
    },
  },
  created () {
    this.getData();
  },
};
</script>
<style scoped lang="less"></style>
